<template>
	<view>
	 <view class="new-file">
		 <!--nav-->
	   <view class="head-nav ">
			
			 
			
	      <view class="nav" :class="navIndex==1?'activite':''" @click="checkIndex(1)">个人排行榜</view>
	      <view class="nav"  :class="navIndex==2?'activite':''" @click="checkIndex(2)">今日排行榜</view>
				<view class="nav"  :class="navIndex==3?'activite':''" @click="checkIndex(3)">总排行榜</view>
				
   
	    </view>
	    <!-- 内容 -->
			
	   <view class="content" v-if="navIndex==1">
	     <view class="mine"><p>{{mine}}</p></view>
			 <view class="person flex">
				 <view class="person-left ">
					 1
					 <image src="../../static/person1.jpg" class="person-img"> </image>
					 <image src="../../static/win.png" class="win"></image>
					 <p class="person-people">{{name}}</p>					
				 </view>
				 <view class="person-right">
					{{millon}}里
				 </view>
			 </view>
			 <view class="person flex">
			 				 <view class="person-left ">
			 					 2
			 					 <image src="../../static/person2.jpg" class="person-img"> </image>
			 					 <image src="../../static/win2.png" class="win2"></image>
			 					 <p class="person-people">{{name}}</p>			
			 				 </view>
			 				 <view class="person-right">
			 					{{millon}}里
			 				 </view>
			 </view> 
			 <view class="person flex">
			 				 <view class="person-left ">
			 					 3
			 					 <image src="../../static/person3.jpg" class="person-img"> </image>
			 					 <image src="../../static/win3.png" class="win3"></image>
			 					 <p class="person-people">{{name}}</p>			
			 				 </view>
			 				 <view class="person-right">
			 					{{millon}}里
			 				 </view>
			 </view>
			 <view class="person flex">
			 				 <view class="person-left ">
			 					 4
			 					 <image src="../../static/person4.jpg" class="person-img"> </image>
			 					 <p class="person-people">{{name}}</p>			
			 				 </view>
			 				 <view class="person-right">
			 					{{millon}}里
			 				 </view>
			 </view>
			 
				 
	    </view> 
			
		
	     <view class="content" v-if="navIndex==2">
	     <view class="mine"><p>{{mine}}</p></view>
	     <view class="person flex">
	     				 <view class="person-left ">
	     					 1
	     					 <image src="../../static/person5.jpg" class="person-img"> </image>
	     					 <image src="../../static/win.png" class="win"></image>
	     					 <p class="person-people">{{name2}}</p>					
	     				 </view>
	     				 <view class="person-right">
	     					{{millon}}里
	     				 </view>
	     </view>
	     <view class="person flex">
	     				 <view class="person-left ">
	     					 2
	     					 <image src="../../static/person4.jpg" class="person-img"> </image>
	     					 <image src="../../static/win2.png" class="win2"></image>
	     					 <p class="person-people">{{name2}}</p>			
	     				 </view>
	     				 <view class="person-right">
	     					{{millon}}里
	     				 </view>
	     </view> 
	     <view class="person flex">
	     				 <view class="person-left ">
	     					 3
	     					 <image src="../../static/person3.jpg" class="person-img"> </image>
	     					 <image src="../../static/win3.png" class="win3"></image>
	     					 <p class="person-people">{{name2}}</p>			
	     				 </view>
	     				 <view class="person-right">
	     					{{millon}}里
	     				 </view>
	     </view>
	     <view class="person flex">
	     				 <view class="person-left ">
	     					 4
	     					 <image src="../../static/person2.jpg" class="person-img"> </image>
	     					 <p class="person-people">{{name2}}</p>			
	     				 </view>
	     				 <view class="person-right">
	     					{{millon}}里
	     				 </view>
	     </view>
	    
			 
			 
			 
			 
			 
	    </view>
			<view class="content" v-if="navIndex==3">
			  <view class="mine"><p>{{mine}}</p></view>
			  <view class="person flex">
			  				 <view class="person-left ">
			  					 1
			  					 <image src="../../static/person5.jpg" class="person-img"> </image>
			  					 <image src="../../static/win.png" class="win"></image>
			  					 <p class="person-people">{{name2}}</p>					
			  				 </view>
			  				 <view class="person-right">
			  					{{millon}}里
			  				 </view>
			  </view>
			  <view class="person flex">
			  				 <view class="person-left ">
			  					 2
			  					 <image src="../../static/person4.jpg" class="person-img"> </image>
			  					 <image src="../../static/win2.png" class="win2"></image>
			  					 <p class="person-people">{{name2}}</p>			
			  				 </view>
			  				 <view class="person-right">
			  					{{millon}}里
			  				 </view>
			  </view> 
			  <view class="person flex">
			  				 <view class="person-left ">
			  					 3
			  					 <image src="../../static/person3.jpg" class="person-img"> </image>
			  					 <image src="../../static/win3.png" class="win3"></image>
			  					 <p class="person-people">{{name2}}</p>			
			  				 </view>
			  				 <view class="person-right">
			  					{{millon}}里
			  				 </view>
			  </view>
			  <view class="person flex">
			  				 <view class="person-left ">
			  					 4
			  					 <image src="../../static/person2.jpg" class="person-img"> </image>
			  					 <p class="person-people">{{name2}}</p>			
			  				 </view>
			  				 <view class="person-right">
			  					{{millon}}里
			  				 </view>
			  </view>
			  	    
			  
			  
			  
			  
				
				
				
			</view>
		
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
         navIndex:1,
				  mine:"我的排名 : 未上榜 (共106人)",
				 name:"唐军",
				 day:"8",
				 millon:"25000.00",
				 name2:"杜小花",
				 millon2:"250000",
				 grop:"六",
				 title: "乡村振兴带头人能力提升班",
				
				 
				 
				 
			}
		},
		
		methods: {
      checkIndex(index){
				this.navIndex=index;
			},
			
			  
		}
	}
</script>

<style>
@import url("list.css");
	
</style>
